{% load staticfiles %}
{% load myfilter %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
    <meta name="author" content="Coderthemes">

    <link rel="shortcut icon" href="{% static '' %}velonic/img/favicon_1.ico">

    <title>{{ product.product_title }}</title>

    <!-- Bootstrap core CSS -->
    <link href="{% static '' %}velonic/css/bootstrap.min.css" rel="stylesheet">
    <link href="{% static '' %}velonic/css/bootstrap-reset.css" rel="stylesheet">

    <!--Animation css-->
    <link href="{% static '' %}velonic/css/animate.css" rel="stylesheet">

    <!--Icon-fonts css-->
    <link href="{% static '' %}velonic/css/font-awesome.css" rel="stylesheet" />
    <link href="{% static '' %}velonic/css/ionicons.min.css" rel="stylesheet" />
    <link href="{% static '' %}velonic/css/material-design-iconic-font.min.css" rel="stylesheet" />

    <!--Morris Chart CSS -->
    <link rel="stylesheet" href="{% static '' %}velonic/css/morris.css">

    <!-- sweet alerts -->
    <link href="{% static '' %}velonic/css/sweet-alert.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{% static '' %}velonic/css/style.css" rel="stylesheet">
    <link href="{% static '' %}velonic/css/helper.css" rel="stylesheet">

    <script type="text/javascript" src="{% static '' %}lib/echarts.min.js"></script>




    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->


</head>
<style>
    .goodsinfo { padding: 10px;}
    .goodsPanel {background: #fff;padding-top: 15px; height: 400px;overflow:scroll;}
    .goodsinfo dl{clear: left;}
    .goodsinfo dd span{padding-right: 30px; line-height: 200%}
    .salesinfo {height: 80px;}
      .salesinfo p{float: left; text-align: center; }
      .salesinfo p span{padding: 2px 5px;background: #ff5500;border-radius: 5px;color: #ffffff; margin-right: 15px; margin-left: 25px;}
      .salesinfo p span.first{ margin-left: 50px;}
      .salesinfo p em{font-size: 20px;}
    .ranking{z-index:-1;margin-top: 80px;left: -60px;}
    .ranking ol li{line-height: 24px; list-style: none;}
    .user_ranking{margin-top: 80px; float: left;}
    .user_ranking ol li{list-style: none; line-height: 40px;}
    .user_ranking ol li.title{font-weight: bold;}
    .user_ranking ol li span{ padding: 2px 5px; background: #f0ad4e;border-radius: 5px; margin-right: 15px;}
    .user_ranking ol li u{padding: 2px 10px;}
      img.thumb{max-width: 250px;}

    .list-group{width: 160px; float: right;}
</style>

<body>

<!-- Aside Start-->
{% include 'velonic/block/side_nav.html' %}
<!-- Aside Ends-->


<!--Main Content Start -->
<section class="content">

<!-- Header -->
{% include 'velonic/block/header.html' %}
<!-- Header Ends -->


<!-- Page Content Start -->
<!-- ================== -->

<div class="wraper container-fluid">
<div class="page-title">
    <h3 class="title" style="font-size: 16px;">［{% ifequal product.platform 1 %}速卖通{% endifequal %}{% ifequal product.platform 2 %}eBay{% endifequal %}{% ifequal product.platform 3 %}Wish{% endifequal %}］: {% if product.product_title_chinese %}{{ product.product_title_chinese }}{% else %}{{ product.product_id|TranslateProductTitle }}{% endif %}</h3>
</div>


<div class="row">


          <div class="col-md-6 goodsinfo col-xs-12">
          <div class="goodsPanel">
              <dl>
              <dt>
                  <span style="font-size: 80px;text-align: center;margin:100px; margin-top:180px;cursor: pointer;"><i class="glyphicon glyphicon-play-circle" onclick="get_transactions('{{ product.product_id }}')"></i></span>
                  <a href="{% url 'aliexpress:open_product' product.product_id %}" target="_blank">
              <img class="" src="{{ product.thumb }}" alt="{{ product.product_title }}" width="250"/></a>
              </dt>
              <dd style="padding-top: 40px;padding-left: 20px;"><span>
                  价格: <i class="badge bg-danger">{% ifnotequal product.low_price product.high_price%}{{ product.low_price|calPrice:product.discount }}-{{ product.high_price|calPrice:product.discount }}{% else %}{{ product.high_price|calPrice:product.discount }}{% endifnotequal %}</i>
                </span>
                <span>
                  心愿单: <i class="badge">{{ product.wish_list }}</i>
                </span>
                <span>
                  成交量: <i class="badge">{{ product.orders }}</i>
                </span>
                <span>
                  投票数: <i class="badge">{{ product.votes }}</i>
                </span>
                  <br/>
                <span>
                  评价数: <i class="badge">{{ product.all_feedback }}</i>
                </span>
                <span>
                  综合评分: <i class="badge">{{ product.average_star_rating }}</i>
                </span>
              <span>
                  最近6个月成交: <i class="badge">{{ product.transactions_in_last_six_months }}</i>
                </span></dd>
          </dl>

          </div>


          </div>

      <div class="col-md-6 goodsinfo col-xs-12">
          <div class="goodsPanel" style="padding-top:5px;">
              <div style="text-align: right;padding-right: 20px;background: #fcc;width: 200px;"><a href="javascript:;" onclick="loadTrans(60)">60天</a>｜<a href="javascript:;" onclick="loadTrans(30)">30天</a>｜<a href="javascript:;" onclick="loadTrans(15)">15天</a>｜<a href="javascript:;" onclick="loadTrans(7)">7天</a></div>
              <div id="TansData" style="height: 75%;"></div>
          <div class="salesinfo">
              <p>
                  <span class="first">销售总额:</span><em id="totalsales"></em>
              </p>
              <p class="">
                  <span>30天销售额:</span><em id="monthsales"></em>
              </p>
              <p class="">
                  <span>7天销售额:</span><em id="weeksales"></em>
              </p>
              <br>
              <p class="">
                  <span class="first">首单时间:</span><em id="firstOrder"></em>
              </p>
          </div>

          </div>

      </div>
      </div>


<div class="row charts goodsinfo">
    <div class="goodsPanel">
    <div id="CountryRank" class="col-md-8" style="height: 100%"></div>
    <div class="ranking col-md-1">
    <ol id="rank-item">

    </ol>
    </div>
    <div class="col-md-3 user_ranking">
        <ol id="rank-user">
           <li class="title">买家等级排行</li>
        </ol>
    </div>
        </div>
</div>

<div style="clear: both;"></div>

<div class="row">


          <div class="col-md-6 goodsinfo col-xs-12">
          <div class="goodsPanel" style="height: 100%;min-height: 400px;">
              <div class="quantityrank col-md-12">
    <table id="quantityrank" class="table table-striped">
        <thead>
              <tr>
                <th>成交数量(件)</th>
                <th>合计笔数</th>
                <th>占比(%)</th>
              </tr>
            </thead>
    </table>
</div>

          </div>


          </div>

      <div class="col-md-6 goodsinfo col-xs-12">
          <div class="goodsPanel">
              <div id="scoreChart" style="height: 80%;"></div>
          </div>

      </div>
      </div>



<!-- WEATHER -->

<div class="row">
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">交易记录 <i class="glyphicon glyphicon-download-alt"><a target="_blank" href="{% url 'downloadcsv' %}?type=t&id={{ product.product_id }}">下载数据</a></i></h3>
                                    </div>
                                    <div class="panel-body">

                                        <table id="datatable" class="table table-striped table-bordered">
                                            <thead>
                                              <tr>
                                                <th>#</th>
                                                <th>用户名</th>
                                                <th>国家</th>
                                                <th>买家等级</th>
                                                <th>成交单价</th>
                                                <th>购买数量</th>
                                                <th>批量</th>
                                                <th>评分</th>
                                                <th>成交时间</th>
                                              </tr>
                                            </thead>

                                            <tbody>
                                            {% for trans in transactions %}
                                              <tr>
                                                <td>{{ trans.id }}</td>
                                                <td>{{ trans.username }}</td>
                                                <td>{{ trans.country_name }} ({{ trans.country_code|upper }})</td>
                                                <td>{{ trans.buyer_leval }}</td>
                                                <td>{{ trans.price }}</td>
                                                <td>{{ trans.quantity }}</td>
                                                <td>{{ trans.lot_num }}</td>
                                                <td>{{ trans.star }}</td>
                                                <td>{{ trans.pub_date|date:"Y/m/d H:i" }}</td>
                                              </tr>
                                            {% endfor %}
                                            </tbody>
                                        </table>

                                    </div>
                                </div>


                            </div>

                        </div>

</div>
<!-- Page Content Ends -->
<!-- ================== -->

<!-- Footer Start -->
{% include 'velonic/block/footer.html' %}
<!-- Footer Ends -->



</section>
<!-- Main Content Ends -->



<!-- js placed at the end of the document so the pages load faster -->
<script src="{% static '' %}velonic/js/jquery.js"></script>
<script src="{% static '' %}velonic/js/bootstrap.min.js"></script>
<script src="{% static '' %}velonic/js/modernizr.min.js"></script>
<script src="{% static '' %}velonic/js/pace.min.js"></script>
<script src="{% static '' %}velonic/js/wow.min.js"></script>
<script src="{% static '' %}velonic/js/jquery.scrollTo.min.js"></script>
<script src="{% static '' %}velonic/js/jquery.nicescroll.js" type="text/javascript"></script>

<!-- Counter-up -->
<script src="{% static '' %}velonic/js/waypoints.min.js" type="text/javascript"></script>
<script src="{% static '' %}velonic/js/jquery.counterup.min.js" type="text/javascript"></script>

<!-- sparkline -->
<script src="{% static '' %}velonic/js/jquery.sparkline.min.js" type="text/javascript"></script>
<script src="{% static '' %}velonic/js/chart-sparkline.js" type="text/javascript"></script>

<!-- skycons -->
<script src="{% static '' %}velonic/js/skycons.min.js" type="text/javascript"></script>

<!--Morris Chart-->
<script src="{% static '' %}velonic/js/sweet-alert.min.js"></script>


 <!-- Datatables-->
        <script src="{% static '' %}velonic/js/datatables/jquery.dataTables.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/dataTables.bootstrap.js"></script>
        <script src="{% static '' %}velonic/js/datatables/dataTables.buttons.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/buttons.bootstrap.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/jszip.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/pdfmake.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/vfs_fonts.js"></script>
        <script src="{% static '' %}velonic/js/datatables/buttons.html5.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/buttons.print.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/dataTables.fixedHeader.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/dataTables.keyTable.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/dataTables.responsive.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/responsive.bootstrap.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/dataTables.scroller.min.js"></script>
        <script src="{% static '' %}velonic/js/bootstrap-datetimepicker.min.js"></script>
        <script src="{% static '' %}velonic/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

        <!-- Datatable init js -->
        <script src="{% static '' %}velonic/js/datatables.init.js"></script>

<script src="{% static '' %}velonic/js/jquery.app.js"></script>

<!-- Dashboard -->


<script type="text/javascript">

            var dtTranslate={//下面是一些汉语翻译
                "sSearch": "搜索",
                "sLengthMenu": "每页显示 _MENU_",
                "sZeroRecords": "没有检索到数据",
                "sInfo": "显示 _START_ 至 _END_ 条 &nbsp;&nbsp;共 _TOTAL_ 条 &nbsp;&nbsp;",
                "sInfoFiltered": "(筛选自 _MAX_ 条数据)",
                "sInfoEmtpy": "没有数据",
                "sProcessing": "<img src='/public/images/loading.gif' /> 数据加载中...",
                "oPaginate":
                            {
                                "sFirst": "首页",
                                "sPrevious": "前一页",
                                "sNext": "后一页",
                                "sLast": "末页"
                            }
            }


            $(document).ready(function() {
                $('#datatable').DataTable({"oLanguage": dtTranslate});
                var table = $('#datatable-fixed-header').DataTable( { fixedHeader: true,"oLanguage": dtTranslate } );
            } );
            TableManageButtons.init();





        </script>


<script type="text/javascript">
    jQuery(document).ready(function($) {
        /* Counter Up */
        $('.counter').counterUp({
            delay: 100,
            time: 1200
        });
    });
    /* BEGIN SVG WEATHER ICON */
    if (typeof Skycons !== 'undefined'){
        var icons = new Skycons(
                        {"color": "#fff"},
                        {"resizeClear": true}
                ),
                list  = [
                    "clear-day", "clear-night", "partly-cloudy-day",
                    "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
                    "fog"
                ],
                i;

        for(i = list.length; i--; )
            icons.set(list[i], list[i]);
        icons.play();
    };
</script>


<script type="text/javascript">

    function loadTrans(days) {
        var dom = document.getElementById("TansData");
    var myChart = echarts.init(dom);
    var app = {};
    var dateData = new Array();
    var tansData = new Array();
    var multiData = new Array();
    var moneyData = new Array();
    var option = null;

    //$.getJSON("{% static '' %}default/data/transdata.json",function(data){
    $.getJSON("{% url 'aliexpress:transdata' %}?productId={{ product.product_id }}&days="+days,function(data){
        var result = data["RECORDS"];
        $.each(result,function(idx,trans){
            dateData.push(trans["pubdate"]);
            tansData.push(parseInt(trans["orders"]));
            multiData.push(parseInt(trans["multorder"]));
            moneyData.push(trans["money"]);
        });
        option = {
        title: {
            text: '成交趋势'
        },
        tooltip: {},
        legend: {
            data:['销量','多件订单','销售额']
        },
        xAxis: {
            data: dateData
        },
        yAxis: [
        {
            name: '销售额',
            type: 'value',
            interval:50

        },
        {
            name: '数量',
            type: 'value',
            interval:1
        }
        ],
        series: [{
            name: '销量',
            type: 'bar',
            data: tansData
        },
        {
            name: '多件订单',
            type: 'bar',
            data: multiData
        },
        {
            name: '销售额',
            type: 'line',
            data: moneyData
        }]
        };
        myChart.setOption(option);
    });

    }

    loadTrans(180)


</script>

  <script>
        var dom2 = document.getElementById("CountryRank");
        var rankChart = echarts.init(dom2);
        var countryName = new Array();
        var orders = new Array();
        var allData = new Array();
        var option2 = null;

        //$.getJSON("data/trans_country.json",function(data){
        $.getJSON("{% url 'aliexpress:countryrank' %}?productId={{ product.product_id }}",function(data){
        var result = data["RECORDS"];
        var c = 0;
        $.each(result,function(idx,trans){
            if(c >9){
                return ;
            }
            countryName.push(trans["country_name"]);
            orders.push(parseInt(trans["orders"]));
            allData.push({value:parseInt(trans["orders"]),name:trans["country_name"]})
            c +=1;
            $('#rank-item').append('<li>'+parseInt(trans["orders"])+'</li>');
        });
        option2 = {
            title: {
                text: 'Top10国家排行榜'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                top:'80',
                data: countryName
            },
            series: [{
                name: '销量',
                type: 'pie',
                data: allData
            }
            ]
        };
        rankChart.setOption(option2);
    });

  </script>

<script type="text/javascript">
var dom3 = document.getElementById("scoreChart");
var scoreChart = echarts.init(dom3);
var app = {};
op = null;
op = {
        title: {
            text: '综合评分'
        },
        tooltip: {},
        radar: {
            // shape: 'circle',
            indicator: [
                { name: '产品评价', max: 5},
                { name: '订单增长率', max: 5},
                { name: '投票数', max: 1000},
                { name: '重复购买率', max: 100},
                { name: '订单数', max: 1000},
                { name: '心愿单', max: 3000}
            ]
        },
        series: [{
            name: '产品综合评分',
            type: 'radar',
            // areaStyle: {normal: {}},
            data : [
                {
                    value : [{% if product.average_star_rating %}{{ product.average_star_rating }}{% else %}0{% endif %}, {% if product.score %}{{ product.score }}{% else %}0{% endif %}, {% if product.votes %}{{ product.votes }}{% else %}0{% endif %}, {{ transTowRate }}, {% if product.orders %}{{ product.orders }}{% else %}0{% endif %}, {% if product.wish_list %}{{ product.wish_list }}{% else %}0{% endif %}],
                    name : '产品综合评分'
                }
            ]
        }]
    };
if (op && typeof op === "object") {
    scoreChart.setOption(op, true);
}
       </script>


  <script>
      $.getJSON("{% url 'aliexpress:userrank' %}?productId={{ product.product_id }}",function(data){
          var result = data["RECORDS"];
          $.each(result,function(idx,trans){
              $('#rank-user').append('<li><span>'+trans["buyer_leval"]+'</span>'+parseInt(trans["orders"])+'<u>'+(parseFloat(trans["percent"])*100).toFixed(2)+'%</u></li>');
          });
      });
  </script>
  <script>
      $.getJSON("{% url 'aliexpress:getsales' %}?productId={{ product.product_id }}",function(data){
          $('#totalsales').append(data["TotalSales"]);
          $('#monthsales').append(data["MonthSalse"]);
          $('#weeksales').append(data["WeekSalse"]);
          $('#firstOrder').append(data["MinDay"]);
      });

      $.getJSON("{% url 'aliexpress:quantityrank' %}?productId={{ product.product_id }}",function(data){
          var result = data["RECORDS"];
          $.each(result,function(idx,trans){
              $('#quantityrank').append('<tr><td>'+parseInt(trans["quantity"])+'</td> <td>'+parseInt(trans["amount"])+'</td> <td>'+(parseFloat(trans["percent"])*100).toFixed(2)+'%</td></tr>');
          });
      });

      function get_transactions(productId){
          alert("开始采集交易记录。。。");
          $.post("{% url 'aliexpress:signle_product_transactions' %}",{productId:productId},function(result){
              //$("span").html(result);
              //console.log(result);
              if(result.error==1){
                  alert(result.msg);
                  return false;
              }else{
                  location.href = '?';
              }
          });
      }

  </script>


<div id="loading" class="" style="display: none;">
      <img src="{% static 'images/loading.jpg' %}" alt=""/>
  </div>


{% include 'velonic/block/footer_comm.html' %}


<div id="YOUDAO_SELECTOR_WRAPPER" style="display:none; margin:0; border:0; padding:0; width:320px; height:240px;"></div>
<script type="text/javascript" src="http://fanyi.youdao.com/openapi.do?keyfrom=TradeTrends&key=633004838&type=selector&version=1.2&translate=on" charset="utf-8"></script>

</body>
</html>